<template xmlns:th="http://www.w3.org/1999/xhtml">
  <div id="Catalog">
    <div v-for="(item,index) in items">
      <view v-if="index==0">
        <h2 >{{item.product.name}}</h2>
      </view>
    </div>
    <div class="item_card_groups">
      <div class="item_card_group">
        <div
            id="item"
            v-for="item in items"
            :key="item.itemId">

          <div class="item_card">
            <div class="item_card_pic">
              <div>
                <img id="pic" :src="item.product.picture" />
<!--                <img :src=getImageUrl(item.description) />-->
              </div>
            </div>
            <div class="item_card_content">
              <div>
                <h4>
<!--                      <a href="itemForm?itemId=EST-15">{{ productForm.id }}</a>-->
                  <router-link :to="{name:'item',params:{id:item.itemId}}"> {{ item.itemId }}</router-link>
                </h4>
              </div>
              <div class="item_card_description">
                <div>{{ item.productId }}</div>
                <div>{{ item.product.name }}</div>
                <div>{{ item.attribute1 }}</div>

                <div>{{ item.attribute2 }}</div>

                <div>{{ item.attribute3 }}</div>

                <div>{{ item.attribute4 }}</div>

                <div>{{ item.attribute5}}</div>

              </div>
              <div>{{item.product.name}}</div>
              <div>${{ item.listPrice}}</div>
              <br />
              <br />

              <div>
<!--                <a :href="'/addItemToCart?workingItemId=' +item.productId " class="Button">加入购物车</a>-->
                <h4>
<!--                  <router-link :to=" {name:'cart',params:{name:item.itemId}}"  @click="addToCart2(item.itemId)">-->
                    <router-link :to=" {name:''}"  @click="addToCart2(item.itemId)">
                  加入购物车
                </router-link>
                </h4>

              </div>
            </div>
          </div>
        </div>
      </div>
      <!--/c:forEach-->
    </div>
  </div>
</template>

<script>
import api from "@/api";
import {useRoute} from "vue-router";
import {reactive} from "vue";
import axios from "axios";
import router from "@/router";


export default {
  name: "ProductView",

setup(){
  const items= reactive([])
  const route = useRoute()
  console.log(route.params.id) // 获取路由参数中的id值
  api.getItemsByProductId(route.params.name).then(
      res => {
        console.log(res.data.data)
        //console.log(res.data.msg)
        //console.log(res.data.data.product.name)
        items.splice(0,items.length)
        items.push(...res.data.data)
      }
  )
//TODO 记得从session拿到username，下面的都是这个username
  const user = JSON.parse(sessionStorage.getItem('user'))
  let user_name = ''
  if(user){
    user_name = user.username
  }
  //点击函数
  const addToCart2 = async (itemId) => {
    if(user_name)
    {
      console.log(user_name)
      const response = await axios.post("http://localhost:8091/cart/cartItem", null, {
        params: {
          //TODO 记得从session拿到username，下面的都是这个username
          //username: "j2ee",
          username: user_name,
          itemId: itemId
        }
      });
      alert('加入购物车成功，刷新查看');
      console.log('Response:', response.data);
      await router.push('/main/cart');
    }
    else {
      alert('加入购物车失败');
      await router.push('/main/signOn')
    }
  };


  return{
      items,
    addToCart2
    }
}

};//export default
</script>

<!--<script setup>-->
<!--const getImageUrl = (url) => {-->
<!--  return new URL(url, import.meta.url).href;-->
<!--  console(ppp)-->
<!--}-->
<!--</script>-->

<style scoped>
#item_att {
  width: 185px;
}
#item_box {
  margin: 40px auto;
}
</style>